<template>
<div>
  <div class="headerTop">
    <router-link to="Jia">
      <img class="jia" src="https://image.hongbeibang.com/Fj1u8rBVnt5DLwXqhx8QKlRPLoGI?48X48&imageView2/1/w/48/h/48" alt="">
  </router-link>
    <router-link to="Search">
      <input class="search" type="text" value="搜索食谱/食材，烘焙/家常菜">
    </router-link>
    <img class="iconsearch" src="https://image.hongbeibang.com/FltPAS-35CZfvSpnHacXWoqcfFz5?42X42&imageView2/1/w/42/h/42" alt="">
    <img class="ling" src="https://image.hongbeibang.com/FjmYGE5z6RvQL-_fdLKuSGYfmwO2?48X48&imageView2/1/w/48/h/48" alt="">
  </div>
  <div class="nav">
    
      <!-- exact 严格匹配，默认模糊匹配 -->
      <router-link tag="li" active-class="active" to="/Headerone">
        <i class="iconfont icon-baike"></i>
        <p style="font-weight:bold">技巧百科</p>
      </router-link>
      <router-link tag="li" active-class="active" to="/Headertwo">
        <i class="iconfont icon-shipin"></i>
        <p style="font-weight:bold">视频学堂</p>
      </router-link>
      <router-link tag="li" active-class="active" to="/Headerthree">
        <i class="iconfont icon-shipinjiaocheng"></i>
        <p style="font-weight:bold">新手教程</p>
      </router-link>
      <router-link tag="li" active-class="active" to="/Headerfore">
        <i class="iconfont icon-dilanxianxingiconyihuifu_huabanfuben"></i>
        <p style="font-weight:bold">食谱分类</p>
      </router-link>
  </div>
  <div class="data">
      <h2>推荐课程</h2>
  </div>
    <MySwiper/>
  <div class="data">
      <h2>元气早餐</h2>
  </div>
  <MySwiper2/>
  <div class="data">
      <h2>私房必做</h2>
  </div>
  <MySwiper3/>
  <div class="data">
      <h2>网红爆款</h2>
  </div>
  <MySwiper4/>
  <div class="data">
      <h2>基础经典</h2>
  </div>
  <MySwiper5/>
  <div class="data">
      <h2>技法装饰</h2>
  </div>
  <MySwiper6/>
</div>
</template>

<script>
import axios from "axios"
import "/code/bakery-state/hongbei/src/assets/iconfon/iconfont.css"
import "/code/bakery-state/hongbei/src/lazyload.js"
import MySwiper from "../../components/MySwiper"
import MySwiper2 from "../../components/MySwiper2"
import MySwiper3 from "../../components/MySwiper3"
import MySwiper4 from "../../components/MySwiper4"
import MySwiper5 from "../../components/MySwiper5"
import MySwiper6 from "../../components/MySwiper6"

export default {
 data () {
return {
  
}

 },
 created() {
    
  },
 components:{
   MySwiper,
   MySwiper2,
   MySwiper3,
   MySwiper4,
   MySwiper5,
   MySwiper6,
 },
 mounted () {
}
}
</script>

<style lang="scss" scoped>
ul,ol,li{
  list-style:none;
}
.headerTop{
  width: 100%;
  height: 44px;
  background-color: #fff;
  // position: relative;
  position: fixed;
  z-index: 999;
  top: 0;
  .jia{
    width: 27px;
    height: 27px;
    margin-top: 9px;
    margin-left: 10px;
  }
  .jia,.search,.ling{
    vertical-align: middle;
  }
  .search{
    width: 65%;
    height: 25px;
    margin-left:35px;
    margin-top: 6px;
    color: #999;
    border-radius:12px;
    text-align: center;
  }
  .ling{
    width: 27px;
    height: 27px;
    margin-top: 9px;
    margin-left: 17px;
  }
  .iconsearch{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 12px;
    left: 100px;
  }
}
.nav{
  width: 100%;
  height: 86px;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  padding-top: 30px;
  li{
    display: flex;
    flex-direction: column;
    text-align: center;
    i{
      font-size: 40px;
    }
  }
}
</style>
